import React, { Component } from 'react';

import { Container } from './StyleActic'

import { get } from '@u/http'

class Actic extends Component {
    state = {
        sikntop: [],
    }
    async componentDidMount() {
        let result = await get({
            url: '/api/ziLiao/list?tId=5'
        })
        this.setState({
            sikntop: result.data.ziLiaos,
        })
    }

    render() {
        if (this.state.sikntop.length >0 ){
            var { typeName, zlRead, zlName, zlSave, zlFengMian } = this.state.sikntop[0]
        } 
        return (
            <Container>
                <div className="actic">
                    <div className="li">
                        <img src={"http://9z4nm9.natappfree.cc" + zlFengMian} alt="" />
                    </div>
                    <ul>
                        <div >
                            <li onClick={() => { this.props.history.push('/edupant', this.state.sikntop[0]) }}> <span>{zlName}</span> </li>
                            <li><i>{typeName}</i>参加: <span>{zlRead}</span> 完成: <span>{zlSave}</span></li>
                        </div>
                    </ul>
                </div>
                <div className="main">
                    {
                        this.state.sikntop.map(v => {
                            return <div key={v.zlId}>
                                <ul onClick={() => { this.props.history.push('/edupant', v) }}>
                                    <li><span>{v.zlName}</span></li>
                                    <li>阅读: <span>{v.zlRead}</span> 收藏: <span>{v.zlSave}</span></li>
                                    <li><i>{v.typeName}</i></li>
                                </ul>
                                <div className="main-right">
                                    <img src={"http://9z4nm9.natappfree.cc" + v.zlFengMian} alt="" />
                                </div>
                            </div>
                        })
                    }
                </div>
            </Container>
        );
    }
}

export default Actic;